<template>
  <div>
    <h1>门店增加</h1>
  </div>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>门店名称</td>
        <td><input type="text" v-model="info.shopName"></td>
      </tr>
      <tr>
        <td>分店名称</td>
        <td><input type="text" v-model="info.branchName"></td>
      </tr>
      <tr>
        <td>门店图片</td>
        <td><input type="file" @change="img">
          <img :src="info.shopImg" width="100" height="100" v-if="info.shopImg != ''">
        </td>
      </tr>
      <tr>
        <td>开业时间</td>
        <td><input type="date" v-model="info.openTime"></td>
      </tr>
      <tr>
        <td>是否启用</td>
        <td>
          <input type="radio" name="state" v-model="info.state" :value="1">是
          <input type="radio" name="state" v-model="info.state" :value="0">否
        </td>
      </tr>
      <tr>
        <td>门店特色</td>
        <td>
          <input type="checkbox" name="feature" v-model="info.feature" value="办婚礼">办婚礼
          <input type="checkbox" name="feature" v-model="info.feature" value="升学宴">升学宴
          <input type="checkbox" name="feature" v-model="info.feature" value="满月酒">满月酒
        </td>
      </tr>
      <tr>
        <td>门店介绍</td>
        <td>
          <textarea v-model="info.desc">


          </textarea>
        </td>
      </tr>
      <tr>
        <td>门店地址</td>
        <td>
          <select v-model="info.addressId">
            <option value="请选择">请选择</option>
            <option :value="itme.id" v-for="itme in address">{{ itme.addressName }}</option>

          </select>
        </td>
      </tr>
      <tr>
        <td>酒店类型</td>
        <td>
          <select v-model="info.hotelType">
            <option value="">请选择</option>
            <option value="电竞酒店">电竞酒店</option>
            <option value="商务酒店">商务酒店</option>
            <option value="海景酒店">海景酒店</option>
          </select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="添加" @click="ok"></td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';


const router = useRouter();
const route = useRoute();

onMounted(() => {
  GetAddressList();
})
//添加时后端需要的数据
let info: any = reactive({
  "shopName": "",
  "branchName": "",
  "shopImg": "",
  "openTime": "",
  "state": '',
  "feature": [],
  "desc": "",
  "addressId": '',
  "hotelType": "",
})
//1.图片上传
const img = (e: any) => {
  //e事件对象
  console.log(e);
  //1.将图片转换formdata格式
  let obj = e.target.files[0];
  let f = new FormData();
  f.append('file', obj);
  //2.发送网络请求
  axios({
    url: 'https://localhost:7155/api/Img/Img',
    method: 'post',
    data: f,
  })
    .then(rec => {
      console.log(rec);
      if (rec.data == "不是图片") {
        alert("上传的不是图片");
        return;
      }
      if (rec.data == "大于2M") {
        alert("图片大于2M");
        return;
      }
      info.shopImg = rec.data;
    })
    .catch(err => {
      console.log(err);
    })
}
let address: any = ref([]);

//下拉
const GetAddressList = () => {
  axios({
    url: 'https://localhost:7155/api/User/GetAddr',
    method: 'get',

  })
    .then(rec => {
      console.log(rec);
      address.value = rec.data;
    })
}

const ok = () => {
  info.feature = info.feature.toString();
  axios({
    url: 'https://localhost:7155/api/User/ShopAdd',
    method: 'post',
    data: info,
  })
    .then(rec => {
      console.log(rec);
      if (rec.data > 0) {
        alert("添加成功");
        return;
      }
      else if (rec.data == -1) {
        alert("门店不能重fu");
        return;
      }
      else {
        alert("添加失败");
        return;
      }
    })
}
</script>

<style scoped></style>